<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--公用样式-->
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./layui/css/layui.css">
    <link rel="stylesheet" href="./css/background.css">
    <link rel="stylesheet" href="./css/color.css">
    <link rel="stylesheet" href="./css/margin.css">
    <link rel="stylesheet" href="./css/header.css">
    <link rel="stylesheet" href="./css/bar.css">

    <!--本页面样式-->
    <link rel="stylesheet" href="./css/order.css">
    <title>我的订单</title>
</head>
<body>
  <div id="main">
      <!--顶部导航-->
      <div class="l-nav">

          <div class="l-container">
              <!--logo-->
              <div class="l-logo">
                  <img class="l-img" src="./image/wtlogo.png" alt="无法显示" />
              </div>

              <!--菜单栏-->
              <ul class="layui-nav l-line-none" lay-filter="">
                  <li class="layui-nav-item"><a href="">首页</a></li>
                  <li class="layui-nav-item"><a href="">账户中心</a></li>
                  <li class="layui-nav-item">
                      <a href="javascript:;">c2c交易</a>
                      <dl class="layui-nav-child">
                          <dd><a href="#">我的订单</a></dd>
                          <dd><a href="#">交易中心</a></dd>
                          <dd><a href="#">全站成交</a></dd>
                          <dd><a href="#">我的仲裁</a></dd>
                      </dl>
                  </li>
                  <li class="layui-nav-item">
                      <a href="javascript:;">语言</a>
                      <dl class="layui-nav-child">
                          <dd><a href="#"><img src="./image/China.png" alt=""> 中文</a></dd>
                          <dd><a href="#"><img style="width: 29px; height: 18px;" src="./image/usa.jpg" alt=""> 英语</a></dd>
                      </dl>
                  </li>
                  <li class="layui-nav-item l-login-out"><a href="">欢迎您：kingend</a><span>退出</span></li>
              </ul>
          </div>
      </div>

      <!--面包屑导航-->
      <div class="l-breadcrumb">
          <span class="l-breadcrumb-title">您的位置：</span>
          <span class="layui-breadcrumb">
              <a href="">首页</a>
              <a href="">账户中心</a>
              <a href=""><cite>安全设置</cite></a>
        </span>
      </div>

      <div class="l-bar">
          <img src="./image/dian.png" alt="无法显示">
          我的订单
      </div>


      <!--我的订单列表-->
      <div class="l-order-table">
          <table class="layui-table" lay-skin="line">
              <colgroup>
                  <col>
                  <col>
                  <col>
              </colgroup>
              <thead>
              <tr>
                  <th>挂单时间</th>
                  <th>金额</th>
                  <th>数量</th>
                  <th>支付方式</th>
                  <th>状态</th>
                  <th>操作</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                  <td>类型1</td>
                  <td>1.2222</td>
                  <td>5</td>
                  <td><img src="./image/zhifubao.png" alt="无法显示"></td>
                  <td>交易成功</td>
                  <td>
                      <a class="layui-btn layui-btn-sm">挂单撤单</a>
                      <a data-index="1" class="layui-btn layui-btn-sm l-show-info">商家信息</a>
                      <a data-index="1" class="layui-btn layui-btn-sm layui-btn-danger l-show-intercessor">申请仲裁</a>
                  </td>
              </tr>
              <tr>
                  <td>类型1</td>
                  <td>1.2222</td>
                  <td>5</td>
                  <td><img src="./image/zhifubao.png" alt="无法显示"></td>
                  <td>交易成功</td>
                  <td>
                      <a class="layui-btn layui-btn-sm">挂单撤单</a>
                      <a data-index="2" class="layui-btn layui-btn-sm l-show-info">商家信息</a>
                      <a data-index="2" class="layui-btn layui-btn-sm layui-btn-danger l-show-intercessor">申请仲裁</a>
                  </td>
              </tr>
              </tbody>
          </table>
      </div>
  </div>

<div style="display: none" class="l-model">
    <div class="l-merchant">
        <p class="l-title">商家信息</p>
        <div class="l-filed-info">
            <p class="l-filed-name">商家名称</p>
            <p class="l-filed-key">李明</p>
        </div>
        <div class="l-filed-info">
            <p class="l-filed-name">手机号码</p>
            <p class="l-filed-key">12345678910</p>
        </div>
        <div class="l-filed-info">
            <p class="l-filed-name">支付宝</p>
            <p class="l-filed-key">12345678910</p>
        </div>
        <div class="l-filed-info">
            <p class="l-filed-name">微信</p>
            <p class="l-filed-key">12345678910</p>
        </div>
        <div class="l-filed-info">
            <p class="l-filed-name">开户银行</p>
            <p class="l-filed-key">中国建设银行</p>
        </div>
        <div class="l-filed-info">
            <p class="l-filed-name">银行支行</p>
            <p class="l-filed-key">坂田支行</p>
        </div>
        <div class="l-filed-info">
            <p class="l-filed-name">银行卡号</p>
            <p class="l-filed-key">12345678910</p>
        </div>
    </div>
</div>

  <!--仲裁遮掩层-->
  <div  style="display: none"  class="l-intercessor-model"></div>
  <div style="display: none"  class="l-intercessor l-merchant">
      <p class="l-title">申请仲裁</p>
      <div class="l-filed-info">
          <p class="l-filed-name"><span class="l-color-red">*</span>申请仲裁原因</p>
          <textarea placeholder="请说明仲裁原因" class="l-filed-key"></textarea>
      </div>

      <div class="l-filed-info">
          <p class="l-filed-name"><span class="l-color-red">*</span>仲裁备注</p>
          <textarea placeholder="请输入备注信息" class="l-filed-key"></textarea>
      </div>

      <div class="l-btn-ground">
          <button class="l-btn layui-btn layui-btn-normal" type="button">确认</button>
          <button class="l-btn layui-btn layui-btn-primary" type="button">取消</button>
      </div>
  </div>
</body>
<script src="./layui/layui.js"></script>
<script src="./js/vue.js"></script>
<script src="./js/animate.js"></script>
<script src="./js/order.js"></script>
</html>